<template>
	<view class="home-page">
		<view class="home-title">
			<view class="iconfont">&#xe601;</view>
			<view class="iconfont" @click="setToggle">&#xe689;</view>
		</view>
		<view class="title-bar"></view>
		<view class="home-content">
			<NewOption v-show="toggle"></NewOption>
			<HomeTomato />
			<HomeMoney />
			<HomeTodolist />
		</view>

	</view>
</template>

<script>
	import NewOption from '../../components/NewOption.vue'
	import HomeTodolist from "../../components/HomeTodolist.vue"
	import HomeMoney from "../../components/HomeMoney.vue"
	import HomeTomato from "../../components/HomeTomato.vue"

	export default {
		data() {
			return {
				toggle: false //控制新建菜单
			}
		},
		provide() {
			return {
				toggle: this.toggle,
				setToggle: this.setToggle,
			}
		},
		components: {
			NewOption,
			HomeTodolist,
			HomeMoney,
			HomeTomato
		},
		methods: {
			setToggle() {
				this.toggle = !this.toggle
			}
		}
	}
</script>

<style lang="scss">
	.home-page {
		background: white;
		display: flex;
		flex-direction: column;
		height: 100vh;

		>.home-title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
			background: #f3f3f3;
		}

		>.title-bar {
			background: #f3f3f3;
			height: 20rpx;
			width: 100vw;
			border-radius: 0px 0px 100px 100px;
			// border: 1px solid red;
		}

		>.home-content {
			flex-grow: 1;
			width: 100vw;
			overflow: auto;
			margin: 5px 0px;
		}
	}
</style>
